<template>
  <div class="left_menu">
    <DragBar type="right" @change="dragChange" />
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';
  import DragBar from './dragBar.vue';

  const state = reactive({
    rightMenuWidth: '200px',
  })

  function dragChange (value: number) {
    state.rightMenuWidth = `${value}px`
  }
</script>

<style lang="scss" scoped>
  .left_menu {
    // background: #fadbdb;
    position: relative;
    width: v-bind('state.rightMenuWidth');
    // width: 150px;
    border-right: 1px solid #ededed;
  }
</style>